/**
 *   在写完了用户列表后,再去看角色列表,你会发现,基本逻辑都一样,
 *     (都有 搜索框查询,添加,table,分页器),只是显示的内容是不一样的
 *   那么下一步就是 : 考虑能否将 重复的逻辑复用一下 ?  封装一下
 *
 *
 *      封装 --- 函数 :
 *     vue2复用组件内容 : mixins
 *     vue3复用 : 提取成函数
 *
 *
 *     函数体 : 重复使用的代码
 *     形参 : 请求方法   查询参数
 *     返回值 : 响应数据,分页器相关的数据
 */

import { ref, reactive } from "vue";

interface IResModel {
  list: any; // 列表
  total: number; // 总条数
}

// ts约束函数的语法 : (params:参数类型)=>PRES <返回类型>
export default function useTable<P, R extends IResModel>(
  reqAPI: (params: P) => PRES<R>,
  reqParams: P
) {
  // 表格 数据
  // 相当于 IAdminListModel['list]   返回 IUserModel[]
  const tableData = ref<R["list"]>([]);

  // 分页器相关参数
  const paginationParams = reactive({
    currentPage: 1,
    pageSize: 5,
    total: 100,
  });

  // 提取查询数据的方法(获取表格数据和搜索框用的都是同一个请求接口)
  const queryList = () => {
    reqAPI({
      pageNum: paginationParams.currentPage,
      pageSize: paginationParams.pageSize,
      ...reqParams,
    }).then((res) => {
      // console.log('当前表格数据为 : ', res);
      tableData.value = res.data.list;
      paginationParams.total = res.data.total;
    });
  };

  // 发送请求 获取数据
  queryList();

  // 改变 分页器的页容量
  const handleSizeChange = (val: number) => {
    console.log(`页容量发生变化 : ${val}`);
    // 重新请求    更新数据
    queryList();
  };
  // 改变 分页器的当前页
  const handleCurrentChange = (val: number) => {
    console.log(`当前页发生变化 : ${val}`);
    // 重新请求  更新数据
    queryList();
  };

  return {
    tableData, // 表格数据(用户列表,角色列表) 响应数据
    paginationParams, // 分页器参数
    handleSizeChange, // 点击修改页容量的方法
    handleCurrentChange, // 点击修改当前页的方法
    queryList, // 检索方法
  };
}
